<template>
 <el-container>
   <el-main>
  <el-form ref="order" :model="order" label-width="80px">

    <el-row justify="center" style="margin-bottom: 20px;">

      <el-col :span="12"> <slot name="order_1"></slot> </el-col>

      <el-col :span="12" :offset="12" v-if="is_company">
        <el-button type="primary">{{clock.hours}}</el-button>
        <el-button type="primary" style="font-weight: 800;">:</el-button>
        <el-button type="primary">{{clock.minutes}}</el-button>
        <el-button type="primary" style="font-weight: 800;">:</el-button>
        <el-button type="primary">{{clock.seconds}}</el-button>
      </el-col>

      <el-col :span="12" :offset="0" v-else>
        <el-button type="primary">{{clock.hours}}</el-button>
        <el-button type="primary" style="font-weight: 800;">:</el-button>
        <el-button type="primary">{{clock.minutes}}</el-button>
        <el-button type="primary" style="font-weight: 800;">:</el-button>
        <el-button type="primary">{{clock.seconds}}</el-button>
      </el-col>
    </el-row>


    <el-row>
      <el-col :span="8">
        <el-form-item label="项目编号">
          <el-input v-model="order.batch_id" placeholder="请选择项目编号" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="招标公司">
          <el-input v-model="order.company" disabled placeholder="请选择项目编号" disabled></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="项目名称">
          <el-input v-model="order.name" disabled placeholder="请选择项目编号" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="类别">
          <el-input v-model="form.type" placeholder="请选择类别"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="询价方式">
          <el-input v-model="form.method"  placeholder="请选择询价方式"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="付款方式">
          <el-input v-model="form.pay_method"  placeholder="请选择付款方式"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-form-item label="币种">
          <el-input v-model="form.currency"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="限价">
          <el-input v-model="order.limit_money"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="报价次数">
          <el-input v-model="order.rows" type="number"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-form-item label="开始时间">
          <el-date-picker type="datetime" placeholder="选择日期" v-model="order.start_at" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="截止时间">
          <el-date-picker type="datetime" placeholder="选择日期" v-model="order.end_at" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="备注">
     <el-input type="textarea" v-model="form.desc" show-word-limit maxlength="1500"></el-input>
    </el-form-item>
  </el-form>

     <el-tabs v-model="activeName"  @tab-click="handleClick">
       <el-tab-pane label="物料明细" name="tab1">

         <el-table :data="order.data" v-if="is_company" @row-click="handleBase">
           <el-table-column prop="id" label="序号"></el-table-column>
           <el-table-column prop="supplier" label="竞标供应商"></el-table-column>
           <el-table-column prop="type" label="类型"></el-table-column>
           <el-table-column prop="av" label="AV设备"></el-table-column>
           <el-table-column prop="material" label="物料制作"></el-table-column>
           <el-table-column prop="third_party" label="第三方"></el-table-column>
           <el-table-column prop="reduce_money" label="报价幅度"></el-table-column>
           <el-table-column prop="limit_money" label="限价"></el-table-column>
           <el-table-column prop="tax" label="含税(%6)"></el-table-column>
           <el-table-column prop="unit" label="单位"></el-table-column>
           <el-table-column prop="unit_cost" label="单价"></el-table-column>
           <el-table-column prop="money" label="总价"></el-table-column>
           <el-table-column prop="add_time" label="日期" width="200"></el-table-column>
           <el-table-column label="附件">
             <template slot-scope="scope">
              <el-button type="primary">附件下载</el-button>
             </template>
           </el-table-column>
           <el-table-column prop="rank_id" label="排名"></el-table-column>
         </el-table>

         <el-table :data="order.data" v-else @row-click="handleBase">
           <el-table-column prop="id" label="序号"></el-table-column>
           <el-table-column prop="supplier" label="竞标供应商"></el-table-column>
           <el-table-column prop="type" label="类型"></el-table-column>

           <el-table-column label="AV设备">
             <template slot-scope="scope">
               <el-input v-model="scope.row.av"></el-input>
             </template>
           </el-table-column>

           <el-table-column label="物料制作">
             <template slot-scope="scope">
               <el-input v-model="scope.row.material"></el-input>
             </template>
           </el-table-column>

           <el-table-column label="第三方">
             <template slot-scope="scope">
               <el-input v-model="scope.row.third_party"></el-input>
             </template>
           </el-table-column>

           <el-table-column prop="reduce_money" label="报价幅度"></el-table-column>
           <el-table-column prop="limit_money" label="限价"></el-table-column>
           <el-table-column prop="tax" label="含税(%6)">
           </el-table-column>
           <el-table-column prop="unit" label="单位"></el-table-column>

           <el-table-column label="单价">
             <template slot-scope="scope">
               <el-input v-model="scope.row.unit_cost"  @blur="changeMoney(scope.row.unit_cost,'unit_cost')"></el-input>
             </template>
           </el-table-column>

           <el-table-column  label="总价">
             <template slot-scope="scope">
               <el-input v-model="scope.row.money" @blur="changeMoney(scope.row.money,'money')"></el-input>
             </template>
           </el-table-column>

           <el-table-column prop="add_time" label="日期" width="200"></el-table-column>
           <el-table-column label="附件">
             <template slot-scope="scope">
               <el-button type="primary" size="mini" @click="downLoad(scope.row)">附件下载</el-button>
             </template>
           </el-table-column>

         </el-table>



       </el-tab-pane>
       <el-tab-pane label="附件列表" name="tab2">
          <el-table
          :data="order.files">
            <el-table-column label="文件名" prop="fileName"></el-table-column>
            <el-table-column label="大小" prop="size"></el-table-column>
            <el-table-column label="类型" prop="ext"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click="downFiles(scope.row)">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
       </el-tab-pane>
       <el-tab-pane label="我的竞价" name="tab3" v-if="!is_company">
            <el-table :data="priceList">
              <el-table-column label="序号" prop="index"></el-table-column>
              <el-table-column label="报价方" prop="supplier"></el-table-column>
              <el-table-column label="报价" prop="money"></el-table-column>
              <el-table-column label="报价时间" prop="add_time"></el-table-column>
            </el-table>
       </el-tab-pane>

       <el-tab-pane label="竞价结果" name="tab4" v-if="!is_company">
         <el-table :data="priceResult">
           <el-table-column label="序号" prop="index"></el-table-column>
           <el-table-column label="类型" prop="type"></el-table-column>
           <el-table-column label="报价人数" prop="people_num"></el-table-column>
           <el-table-column label="排名" prop="rank_id"></el-table-column>
         </el-table>
       </el-tab-pane>
     </el-tabs>
   </el-main>

 </el-container>

</template>

<script>

  import {mapState,mapActions} from 'vuex'
  import {getMypriceList,getMyPriceResult} from '@/apilist/Supplier'
    export default {
        name: "orderDetail",
        props: ['is_company','order_id'],
        data(){
            return {
                activeName: 'tab1',
                form: {
                    type: '',
                    currency: '',
                    method: '',
                    pay_method: '',
                    id: 0,
                    av: '',
                    material: '',
                    third_party: '',
                    unit_cost: 0,
                    money: 0,
                    desc: '',
                },

                clock: {
                    hours: '',
                    minutes: '',
                    seconds: '',
                },
                priceList: [],//我的竞价列表
                priceResult: [],//竞价结果

            }
        },

        computed: {
            ...mapState("Order",['order']),
        },

        methods: {
            ...mapActions("Order",['getOrderActions']),

            handleClick(tab, event) {
                let name = tab.name
                if(name == 'tab3'){//我的竞价
                    getMypriceList({order_id: this.order_id}).then(res => {
                        this.priceList = res.data;
                    })
                }else if (name == 'tab4'){
                    getMyPriceResult({order_id: this.order_id}).then(res => {
                        this.priceResult = res.data
                    });
                }
            },
            changeMoney(money,field)
            {
                if(this.form.hasOwnProperty(field)){
                    this.form[field] = money;
                }
            },
            handleBase(row,col,e)
            {
                this.form.type = row.type
                this.form.currency = row.currency
                this.form.method = row.method
                this.form.pay_method = row.pay_method
                this.form.id = row.id
                this.form.av = row.av
                this.form.material = row.material
                this.form.third_party = row.third_party
                this.form.unit_cost = row.unit_cost
                this.form.money = row.money
                this.form.desc = row.desc
            },

            //下载附件
            downLoad(row){
                let files = JSON.parse(row.files)
                if(files.length > 0){
                  files.forEach((item,index) => {
                      this.fun.downloadFile(item.fileUrl,item.fileName)
                  })
                }
            },
          GetDateDiff(endTime) {
              let date2= endTime.replace(/\-/g, "/");;  //开始时间
              let date1 = new Date();    //结束时间
              let date3 = new Date(date2).getTime() - date1.getTime();   //时间差的毫秒数

              //------------------------------

              //计算出相差天数
             // var days=Math.floor(date3/(24*3600*1000))

              //计算出小时数
              let leave1=date3%(24*3600*1000)    //计算天数后剩余的毫秒数
              this.clock.hours=Math.floor(leave1/(3600*1000)) < 10 ? '0' + Math.floor(leave1/(3600*1000)) : Math.floor(leave1/(3600*1000));
              //计算相差分钟数
              let leave2=leave1%(3600*1000)        //计算小时数后剩余的毫秒数
              this.clock.minutes=Math.floor(leave2/(60*1000)) < 10 ? '0' + Math.floor(leave2/(60*1000)) : Math.floor(leave2/(60*1000));
              //计算相差秒数
              let leave3=leave2%(60*1000)      //计算分钟数后剩余的毫秒数
              this.clock.seconds=Math.round(leave3/1000) < 10 ? '0' + Math.round(leave3/1000) : Math.round(leave3/1000);

          },
            downFiles(row)
            {
                this.fun.downloadFile(row.fileUrl,row.fileName)
            }

        },
        created() {
            this.getOrderActions({id: this.$route.query.id})
            let end_at = sessionStorage.getItem('orderEndDate');
            console.log(end_at)
            if(end_at){
                setInterval(() => {
                    this.GetDateDiff(end_at)
                },1000);
            }


        },
        mounted() {

        }
    }
</script>

<style scoped>

</style>
